<template>
  <div>
    <el-button class="submitBtn" type="text" @click="showEditOrder">
      提工单
    </el-button>

    <div
      v-for="(item, index) in clineWoList"
      :key="index"
      class="workContent"
      style="width:1600px, margin-bottom:20px"
    >
      <div class="workTime">{{ item.createdDate }}</div>
      <el-button
        :style="{ display: item.statusDict == 'W' ? 'block' : 'none' }"
        class="delBtn"
        type="text"
        @click="onSelectDel(item.code)"
      />
      <div class="workList" @click="onSelectOrder(item)">
        <div class="workLfet">
          <div class="workType">
            <div style="width:160px">
              <div style="font-weight: 600; display: inline-block">工单类型:</div>
              {{ item.typeDictValue }}
            </div>
            <div>
              <div style="font-weight: 600; display: inline-block">所属模块:</div>
              {{ item.moduleDictValue }}
            </div>
            <div>
              <div style="font-weight: 600; display: inline-block">NO:</div>
              {{ item.code }}
            </div>
            <div>
              <div
                v-if="item.statusDict == 'W'"
                class="dispose"
                style="color:#ff6600"
              >
                待处理
              </div>
              <div
                v-if="item.statusDict == 'D'"
                class="dispose"
                style="color:#6c9"
              >
                处理中
              </div>
              <div
                v-if="item.statusDict == 'C'"
                class="dispose"
                style="color:#666"
              >
                已处理
              </div>
            </div>
          </div>
          <div class="workdescribe">
            <div style="font-weight: 600; display: inline-block">
              问题描述：
            </div>
            {{ item.description }}
          </div>
          <div class="accessory">
            附件：
            <div style="font-weight: 500">
              <div v-for="(res, cindex) in item.attachments" :key="cindex">
                {{ res.fileName }}
              </div>
            </div>
          </div>
        </div>
        <div
          class="workRight"
          :style="{ display: item.images.length == 0 ? 'none' : 'block' }"
        >
          <img 
            :src="item.images && item.images[0] && item.images[0].attachmentUrl"
            class="imgUrl" 
          >
        </div>
      </div>
    </div>
    <!-- 分页 -->

    <RPagination
      :current="current"
      :size="size"
      :total="total"
      @onPageChange="handleCurrentChange"
    />
    <!-- 删除框 -->
    <el-dialog
      title="提示"
      :visible="modalKey === modalKeys.dispose"
      width="30%"
    >
      <span>确定删除工单NO：{{ modalData }}？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">
          取 消
        </el-button>
        <el-button type="primary" @click="delWo(modalData)">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <OrderEdit :visible="modalKey === modalKeys.edit" />
    <OrderView :visible="modalKey === modalKeys.view" />

  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import OrderEdit from '@/components/WorkOrders/OrderEdit'
import OrderView from '@/components/WorkOrders/OrderView'
import RPagination from '@/components/r-pagination'

export default {
  components: {
    OrderEdit,
    OrderView,
    RPagination
  },
  data() {
    return {
      modalKeys: {
        edit: 'edit',
        view: 'view',
        dispose: 'dispose'
      },
      dialogVisibleDel: false,
      dialogVisible: false, // 弹出框
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },

  computed: {
    ...mapState('clientOrder', [
      'loading',
      'clineWoList',
      'conditins',
      'woList',
      'size',
      'total',
      'current'
    ]),
    ...mapGetters(['modalKey', 'modalData'])
  },
  mounted() {
    this.$store.dispatch('clientOrder/onClientPage')
  },
  methods: {
    // 删除弹框
    onSelectDel(item) {
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.dispose,
        modalData: item
      })
    },
    onClose() {
      this.$store.dispatch('hideModal')
    },
    // 分页
    handleCurrentChange(val) {
      this.$store.dispatch('clientOrder/onClientPage', { current: val })
    },

    // 工单删除
    async delWo(row) {
      this.$store.dispatch('hideModal')
      this.$store.dispatch('clientOrder/onDelWo', row)
    },

    // 工单编辑
    showEditOrder() {
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.edit
      })
    },

    // 选择工单
    onSelectOrder(item) {
      const { statusDict } = item || {}
      // 状态(W:等待；D：处理中；C：完成) 在 等待状态可以编辑，处理状态不可修改

      this.$store.dispatch('showModal', {
        // modalKey: this.modalKeys.view,
        modalKey:
          statusDict === 'W' ? this.modalKeys.edit : this.modalKeys.view,
        modalData: item
      })
    }
  }
}
</script>

<style scoped lang="scss">
.submitBtn {
  // 提交按钮
  width: 200px;
  height: 100px;
  color: #7aa0f9;
  line-height: 136px;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  background: url('../../icons/png/jiahao.png') no-repeat 54px -7px;
  background-size: 90px 90px;
  background-color: #ebeffe;
}

.workContent {
  // 内容
  margin-bottom: 3%;
  cursor: pointer;
  .workTime {
    font-size: 16px;
    margin-bottom: 13px;
    display: inline-block;
  }
  .delBtn {
    width: 25px;
    height: 25px;
    float: right;
    background: url('../../icons/png/detele.png') no-repeat;
    background-size: 22px 25px;
    opacity: 0;
  }
  .workList {
    background-color: #fafafa;
    width: 100%;
    height: 200px;
    .workLfet {
      width: 70%;
      float: left;
      font-size: 15px;
      .workType {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        margin-top: 10px;
        .dispose {
          border: 1px solid;
        }
      }
      .workdescribe {
        width: 100%;
        height: 70px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        margin-bottom: 21px;
      }
      .accessory {
        display: flex;
        font-weight: 600;
        margin-left: 30px;
      }
    }
    .workRight {
      float: right;
      width: 180px;
      height: 180px;
      margin-right: 20px;
      margin-top: 10px;
      .imgUrl {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.block {
  float: right;
  margin-right: 3%;
}
.workContent:hover {
  .delBtn {
    opacity: 1;
  }
}

.upload-demo >>> .el-upload-list {
  display: flex;
}
.upload-demo >>> .el-upload-list__item {
  width: 200px;
  margin-right: 10px;
}
</style>
